<template>
	<view class="wrap">
		<view class="top">
			<view class="item">
				<view class="left">收货人</view>
				<input type="text" placeholder-class="line" placeholder="请填写收货人姓名" v-model="info.name"/>
			</view>
			<view class="item">
				<view class="left">手机号码</view>
				<input type="text" placeholder-class="line" placeholder="请填写收货人手机号" v-model="info.phone"/>
			</view>
			<view class="item" @tap="showRegionPicker">
				<view class="left">所在地区</view>
				<input disabled type="text" placeholder-class="line" placeholder="省市区县、乡镇等" v-model="info.province==null ? '' :info.province + info.city + info.county" />
			</view>
			<view class="item address">
				<view class="left">详细地址</view>
				<textarea type="text" placeholder-class="line" placeholder="街道、楼牌等" v-model="info.address" />
			</view>
			<!-- <view class="site-clipboard">
				<textarea placeholder-class="line" value="" placeholder="粘贴文本,可自动识别姓名和地址等" />
				<view class="clipboard">
					地址粘贴板
					<u-icon name="arrow-down" class="icon" :size="20"></u-icon>
				</view>
			</view> -->
		</view>
		<view class="bottom">
			<view class="default">
				<view class="left">
					<view class="set">设置默认地址</view>
					<view class="tips">提醒：每次下单会默认推荐该地址</view>
				</view>
				<view class="right">
					<switch  :checked="info.defaultCheck?info.defaultCheck:false" color="red" @change="setDefault"> </switch>
				</view>
			</view>
		</view>
		<u-button style=" width: 90%;" type="primary" @click="submit">提交</u-button>
		<u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @cancel="cancel" @change="changeHandler"></u-picker>
	</view>
</template>

<script>
export default {
	data() {
		return {
			rec: 0, //rec用于记录是修改跳转来的还是添加跳转来的，默认是添加
			show: false,
			info:{'is_default':0},
			columns: [
				['中国', '美国'],
				['深圳', '厦门', '上海', '拉萨'],
				['A','B','C'],
			],
			columnData: [
				['深圳', '厦门', '上海', '拉萨'],
				['得州', '华盛顿', '纽约', '阿拉斯加']
			],
			columnData2: [
				[['A','B','C'],['A1','B1','C1'],['A2','B2','C2'],['A3','B3','C3']],
				[['AA','BB','CC'],['AA1','BB1','CC1'],['AA2','BB2','CC2'],['AA3','BB3','CC3']]
			]
		};
	},
	computed:{
		
	},
	methods: {
		async onLoad(options){
			if(options.id){
				this.rec = 1; //1表示是修改跳转来的
				const res = await uni.$u.api.addressOne(options.id);
				this.info = res;
				this.info.defaultCheck = this.info.is_default == 0 ? false : true;
				console.log(this.info);
			}
		},
		setDefault(e) {
			this.info.is_default = this.info.is_default === 1 ? 0 : 1;
			console.log(this.info.is_default);
		},
		showRegionPicker() {
			this.show = true;
		},
		changeHandler(e) {
			const {
				columnIndex,
				value,
				values, // values为当前变化列的数组内容
				index,
				indexs, //这个是选择的三个列的索引值
				// 微信小程序无法将picker实例传出来，只能通过ref操作
				picker = this.$refs.uPicker
			} = e
			// 当第一列值发生变化时，变化第二列(后一列)对应的选项
			if (columnIndex === 0) {
				// picker为选择器this实例，变化第二列对应的选项
				picker.setColumnValues(1, this.columnData[index])
				picker.setColumnValues(2, this.columnData2[index][0]);
			}
			if(columnIndex === 1){
				picker.setColumnValues(2, this.columnData2[indexs[0]][index]);
			}
		},
		// 回调参数为包含columnIndex、value、values
		confirm(e) {
			// console.log('confirm', e)
			this.show = false;
			this.info.province = e.value[0];
			this.info.city =  e.value[1];
			this.info.county = e.value[2];
		},
		cancel(){
			this.show = false;
		},
		async submit(){
			this.$delete(this.info,'defaultCheck');
			// console.log(this.info);
			if(uni.$u.test.isEmpty(this.info.name) || uni.$u.test.isEmpty(this.info.phone) || uni.$u.test.isEmpty(this.info.province) || uni.$u.test.isEmpty(this.info.city) || uni.$u.test.isEmpty(this.info.county) || uni.$u.test.isEmpty(this.info.address)){
				uni.$u.toast("信息填写不完整");
				setTimeout(1000);
				return false;
			}
			let res = null;
			if(this.rec===1){//修改
				res = await uni.$u.api.addressUpdate(this.info.id,this.info);
			}else{//添加新地址
			    res = await uni.$u.api.addressAdd(this.info);
			}
			
			if(res=== false){
				return false;
			}else {
				uni.$u.route({
					type: 'navigateTo',
					url: '/pages/address/address'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/ .line {
	color: $u-light-color;
	font-size: 28rpx;
}
.wrap {
	background-color: #f2f2f2;
	.top {
		background-color: #ffffff;
		border-top: solid 2rpx $u-border-color;
		padding: 22rpx;
		.item {
			display: flex;
			font-size: 32rpx;
			line-height: 100rpx;
			align-items: center;
			border-bottom: solid 2rpx $u-border-color;
			.left {
				width: 180rpx;
			}
			input {
				text-align: left;
			}
		}
		
		.address {
			padding: 20rpx 0;
			textarea {
				// width: 100%;
				height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
		}
		.site-clipboard {
			padding-right: 40rpx;
			textarea {
				// width: 100%;
				height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
			.clipboard {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: $u-tips-color;
				height: 80rpx;
				.icon {
					margin-top: 6rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	.bottom {
		padding: 40rpx;
		padding-right: 0;
		background-color: #ffffff;
		font-size: 28rpx;
		
		.default {
			display: flex;
			justify-content: space-between;
			border-bottom: solid 2rpx $u-border-color;
			line-height: 64rpx;
			.tips {
				font-size: 24rpx;
			}
			.right {
				padding-right: 18rpx;
				zoom:0.7;
			}
		}
	}
}
</style>
